<template>
  <div v-show="isShow" class="modal-box-view">
    <div class="msg-mask">
      <div class="msg-popup msg-mask-enter-active" :style="{width: `${width}px`, backgroundColor: backgroundColor}">
        <!-- animate__animated animate__backInDown -->
        <div class="close">
          <i class="el-icon-close icon" @click="isShow = false"></i>
        </div>
        <div class="msg-contents" :style="{height: `${height}px`}">
          <slot></slot>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  /**
   *  模态框
   */
  name: 'ModalBox',
  props: {
    width: {
      type: Number,
      default: 500
    },
    height: {
      type: Number,
      default: 600
    },
    backgroundColor: {
      type: String,
      default: '#f5f6ee'
    },
    modalShow: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      isShow: this.modalShow,
    }
  },
  created () {
  },
  methods: {

  },
  watch: {
    modalShow: {
      immediate: true,
      handler () {
        this.isShow = this.modalShow
      }
    },
    isShow () {
      if (!this.isShow) {
        this.$emit('closeModal')
      }
    }
  }
}
</script>
<style lang="scss">
.modal-box-view {
  .msg-popup {
    // width: 500px;
    z-index: 20;
    position: relative;
    margin: 100px auto;
    padding: 5px;
    // background-color: #f5f6ee;
    .close {
      color: #968e8e;
      font-size: 40px;
      text-align: right;
      .icon {
        cursor: pointer;
      }
    }
    .msg-contents {
      height: 600px;
      padding: 0px 20px 20px 20px;
      color: #565555;
      .title {
        color: #333333;
        font-size: 18px;
        // font-weight: bold;
      }
      .user {
        .iconfont {
          color: #409eff;
        }
        font-size: 12px;
      }
      .el-scrollbar-msg {
        height: 100%;
        width: 100%;
      }
      .el-scrollbar-msg .el-scrollbar__wrap {
        overflow-x: auto;
      }
    }
  }
  .msg-mask {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    tap-highlight-color: rgba(0, 0, 0, 0);
    z-index: 10;
    transition: opacity 400ms;
    // pointer-events: none; // 不能操作
  }
  .msg-mask-leave-active,
  .msg-mask-enter-active {
    transition: opacity 300ms;
  }
}
</style>
